<template>
  <div>
    <el-button type="primary" size="small" @click.native="load();dialogFormVisible = true">修改</el-button>

    <el-dialog title="博客修改" :visible.sync="dialogFormVisible" :modal-append-to-body="false" fullscreen v-bind:before-close="open">
      <el-form ref="updateBlog" :model="form" v-bind:rules="rules">
        <el-form-item label="博客标题" :label-width="formLabelWidth" prop="title">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类" :label-width="formLabelWidth" prop="type">
          <el-select v-model="form.type" placeholder="选择分类" filterable>
            <el-option v-for="(item,index) in types" v-bind:key="index" v-bind:value="item.typeName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签" :label-width="formLabelWidth" prop="label">
          <el-select v-model="form.label" placeholder="设置标签" clearable filterable multiple allow-create default-first-option>
            <el-option v-for="(item,index) in labels" v-bind:key="index" v-bind:value="item.labelName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="博客内容" :label-width="formLabelWidth" prop="article">
          <el-radio-group v-model="editType">
            <el-radio :label="1">富文本编辑器</el-radio>
            <el-radio :label="2">MarkDown编辑器</el-radio>
          </el-radio-group>
          <WangEditor v-if="editType===1" v-on:getArticle="catchData" v-bind:content="form.article"></WangEditor>
          <MavonEditor v-if="editType===2" v-on:sendText="catchData" v-bind:content="form.article"></MavonEditor>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false" v-on:click="onSubmit('updateBlog')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import WangEditor from "./WangEditor";
import MavonEditor from "./MavonEditor";
import qs from "qs";
export default {
  inject:['reload'],
  name: "BlogUpdate",
  props:['title','article','type','label','bid','editorType'],
  components:{
    WangEditor,
    MavonEditor,
  },
  data(){
    return{
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        title: '',
        type: '',
        label: [],
        article: '',
      },
      types: [],
      typeIndex:0,
      labels: [],
      editType: 1,
      formLabelWidth: '100px',
      rules:{
        title:[{required:true, message:'标题不能为空', trigger:'blur'}],
        type:[{required:true, message:'选择文章分类', trigger:['blur','change']}],
        label:[{type:'array', required:true, message:'选择文章标签', trigger:['blur','change']}],
        article: [{required:true, message:'正文不能为空', trigger:['blur','change']}],
      },
    }
  },
  methods: {
    onSubmit(formName){
      this.$refs[formName].validate((valid)=>{
        if (valid){
          this.axios.post('/blog/updateBlog',qs.stringify({
            title:this.form.title,
            type:this.form.type,
            label:this.form.label,
            article:this.form.article,
            labelNum:this.form.label.length,
            bid:this.bid,
            editType: this.editType,
          })).then((response)=>{
            this.$message.success(response.data.tip.toString());
            this.$refs.updateBlog.resetFields();
            this.reload();
          });
        }else {
          this.$message.error("输入内容无效，请正确填写");
        }
      });
    },
    catchData(value){
      this.form.article = value;
    },
    open(){
      this.$confirm('内容尚未提交，是否退出?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dialogFormVisible=false;
      });
    },
    load(){
      this.axios.post('/blog/queryAllBlogType',qs.stringify({
        start:-1,
      })).then((response)=>{
        this.types=response.data;
      });
      this.axios.post('/blog/queryAllBlogLabel',qs.stringify({
        start:-1,
      })).then((response)=>{
        this.labels=response.data;
      });
      this.form.title = this.title;
      this.form.label = this.label;
      this.form.type = this.type;
      this.form.article = this.article;
      this.editType=this.editorType;
    }
  },
}
</script>

<style scoped>

</style>
